<script setup>
import Header from '@/components/header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Sidebar from '@/components/sidebar/App.vue'
import Footer from '@/components/footer/App.vue'
</script>

<template>
  <Header></Header>
  <div class="details">
    <Breadcrumb first-bread="服务能力" last-bread="会务服务"></Breadcrumb>

    <h1 class="page-title">会务服务</h1>

    <p class="page-subtitle">专业一站式会议活动解决方案，为您打造完美会议体验</p>


    <div class="intro-section">
      <div class="intro-content">
        <div class="intro-text">
          <h2>会务服务概述</h2>
          <p>创新服务平台提供专业的一站式会务服务解决方案，涵盖会议策划、场地预订、设备租赁、现场执行等全流程服务。我们的专业团队拥有丰富的会议活动经验，能够根据客户需求定制个性化的会务方案。</p>
          <p>我们与全国1000+优质会议场地建立了合作关系，包括五星级酒店、会议中心、特色场地等，能够满足不同规模、不同类型的会议需求。同时，我们提供专业的会议技术支持，包括同声传译、视频会议、直播服务等，确保会议顺利进行。
          </p>
          <p>平台已成功承办超过500场会议活动，服务客户包括世界500强企业、政府机构、行业协会等，客户满意度达98%。</p>
        </div>
        <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="会务服务" class="intro-image">
      </div>
    </div>

    <div class="advantages-section">
      <h2 class="section-title">我们的优势</h2>
      <p>选择我们的会务服务，享受专业、高效、省心的会议体验</p>

      <div class="advantages-grid">
        <div class="advantage-card">
          <div class="advantage-icon">🏨</div>
          <h3>丰富场地资源</h3>
          <p>覆盖全国1000+优质会议场地，满足不同规模、不同类型会议需求</p>
        </div>

        <div class="advantage-card">
          <div class="advantage-icon">👨‍💼</div>
          <h3>专业团队</h3>
          <p>资深会务策划和执行团队，拥有10年以上行业经验</p>
        </div>

        <div class="advantage-card">
          <div class="advantage-icon">💰</div>
          <h3>成本控制</h3>
          <p>通过规模采购和资源整合，为客户节省20%-30%的会议成本</p>
        </div>

        <div class="advantage-card">
          <div class="advantage-icon">🔄</div>
          <h3>一站式服务</h3>
          <p>从策划到执行的全流程服务，客户只需提出需求</p>
        </div>

        <div class="advantage-card">
          <div class="advantage-icon">📱</div>
          <h3>技术支持</h3>
          <p>提供先进的会议技术解决方案，包括直播、同传等</p>
        </div>

        <div class="advantage-card">
          <div class="advantage-icon">🛡️</div>
          <h3>风险保障</h3>
          <p>完善的应急预案和保险服务，确保会议安全顺利</p>
        </div>
      </div>
    </div>


    <div class="services-section">
      <h2 class="section-title">服务内容</h2>
      <p>全方位的会务服务，满足您的各类会议需求</p>

      <div class="service-list">
        <div class="service-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="会议策划" class="service-image">
          <div class="service-content">
            <h3>会议策划与咨询</h3>
            <p>提供专业的会议策划服务，包括会议主题设计、议程规划、嘉宾邀请等。我们的策划团队将根据会议目标和预算，设计最优的会议方案，确保会议效果最大化。</p>
            <p>服务特点：创意策划、精准定位、效果导向</p>
            <p>适用场景：企业年会、行业峰会、新品发布会等</p>
          </div>
        </div>

        <div class="service-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="场地预订" class="service-image">
          <div class="service-content">
            <h3>场地预订与管理</h3>
            <p>提供全国范围内的会议场地预订服务，包括酒店、会议中心、特色场地等。我们与多家场地建立了战略合作关系，能够为客户争取最优价格和增值服务。</p>
            <p>服务特点：资源丰富、价格优惠、增值服务</p>
            <p>适用场景：各类会议、培训、活动场地需求</p>
          </div>
        </div>

        <div class="service-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="会议执行" class="service-image">
          <div class="service-content">
            <h3>会议现场执行</h3>
            <p>提供专业的会议现场执行服务，包括签到管理、会场布置、设备调试、流程控制等。我们的执行团队经验丰富，能够确保会议各个环节顺利进行。</p>
            <p>服务特点：专业团队、细致服务、应急保障</p>
            <p>适用场景：需要专业现场执行的各类会议活动</p>
          </div>
        </div>

        <div class="service-item">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="技术支持" class="service-image">
          <div class="service-content">
            <h3>会议技术支持</h3>
            <p>提供全方位的会议技术支持，包括同声传译、视频会议、直播服务、多媒体制作等。我们拥有先进的技术设备和专业的技术团队，能够满足各类技术需求。</p>
            <p>服务特点：先进设备、专业团队、稳定可靠</p>
            <p>适用场景：国际会议、线上会议、大型活动等</p>
          </div>
        </div>
      </div>
    </div>

    <div class="process-section">
      <h2 class="section-title">服务流程</h2>
      <p>清晰的服务流程，确保会议活动顺利进行</p>

      <div class="process-steps">
        <div class="step">
          <div class="step-number">1</div>
          <div class="step-title">需求沟通</div>
          <div class="step-desc">了解客户需求，明确会议目标和预算</div>
        </div>

        <div class="step">
          <div class="step-number">2</div>
          <div class="step-title">方案设计</div>
          <div class="step-desc">制定会议方案，包括场地、议程、预算等</div>
        </div>

        <div class="step">
          <div class="step-number">3</div>
          <div class="step-title">合同签订</div>
          <div class="step-desc">确认方案细节，签订服务合同</div>
        </div>

        <div class="step">
          <div class="step-number">4</div>
          <div class="step-title">筹备执行</div>
          <div class="step-desc">场地布置、物料准备、人员安排等</div>
        </div>

        <div class="step">
          <div class="step-number">5</div>
          <div class="step-title">现场服务</div>
          <div class="step-desc">会议现场执行与管理，确保顺利进行</div>
        </div>
      </div>
    </div>


    <div class="venue-section">
      <h2 class="section-title">推荐场地</h2>
      <p>精选优质会议场地，满足不同会议需求</p>

      <div class="venue-grid">
        <div class="venue-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="五星级酒店" class="venue-image">
          <div class="venue-content">
            <h3>国际会议中心</h3>
            <p>高端五星级酒店会议场地，可容纳500人，配备先进会议设施</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="venue-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="创意空间" class="venue-image">
          <div class="venue-content">
            <h3>创意办公空间</h3>
            <p>现代化创意空间，适合小型研讨会和团队活动，氛围轻松活泼</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="venue-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="度假村" class="venue-image">
          <div class="venue-content">
            <h3>湖畔度假村</h3>
            <p>风景优美的度假村会议场地，适合企业年会和团队建设活动</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>
      </div>
    </div>


    <div class="cases-section">
      <h2 class="section-title">成功案例</h2>
      <p>我们已为众多企业提供了优质的会务服务</p>

      <div class="case-list">
        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="科技峰会" class="case-image">
          <div class="case-content">
            <h4>2023全球科技创新峰会</h4>
            <p>承办为期3天的国际科技峰会，接待来自20个国家的500余名参会者，提供全程同声传译和直播服务。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="企业年会" class="case-image">
          <div class="case-content">
            <h4>某集团年度盛典</h4>
            <p>策划执行1000人规模的企业年会，包括颁奖典礼、文艺演出和晚宴，获得客户高度评价。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="产品发布会" class="case-image">
          <div class="case-content">
            <h4>新产品全球发布会</h4>
            <p>策划线上线下结合的新品发布会，现场200人参与，线上直播观看量突破50万。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>
      </div>
    </div>


    <Footer></Footer>
  </div>
</template>

<style scoped>
.details{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面标题 */
.page-title {
  font-size: 32px;
  text-align: center;
  margin: 40px 0;
  color: #1e5799;
  position: relative;
  padding-bottom: 20px;
}

.page-title:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: #207cca;
}

.page-subtitle {
  text-align: center;
  font-size: 18px;
  color: #666;
  max-width: 800px;
  margin: 0 auto 50px;
  line-height: 1.8;
}

/* 会务服务介绍 */
.intro-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.intro-content {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.intro-text {
  flex: 1;
}

.intro-text h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #1e5799;
}

.intro-text p {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.intro-image {
  width: 500px;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-left: 40px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* 服务优势 */
.advantages-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 24px;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
  color: #1e5799;
  position: relative;
}

.section-title:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: #207cca;
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.advantage-card {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 30px;
  border: 1px solid #e0e9ff;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
}

.advantage-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(30, 87, 153, 0.1);
  background-color: white;
}

.advantage-icon {
  font-size: 48px;
  color: #207cca;
  margin-bottom: 20px;
}

.advantage-card h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #1e5799;
}

.advantage-card p {
  color: #666;
  font-size: 14px;
}

/* 服务内容 */
.services-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.service-list {
  margin-top: 30px;
}

.service-item {
  display: flex;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px dashed #e0e9ff;
}

.service-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.service-content {
  flex: 1;
}

.service-content h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #1e5799;
}

.service-content p {
  color: #555;
  font-size: 15px;
  line-height: 1.8;
}

/* 服务流程 */
.process-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.process-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  position: relative;
}

.process-steps:before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, #207cca, #1e5799);
  z-index: 1;
}

.step {
  text-align: center;
  position: relative;
  z-index: 2;
  width: 20%;
}

.step-number {
  width: 60px;
  height: 60px;
  background-color: #207cca;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  margin: 0 auto 15px;
  box-shadow: 0 5px 15px rgba(30, 87, 153, 0.3);
}

.step-title {
  font-size: 16px;
  font-weight: bold;
  color: #1e5799;
  margin-bottom: 10px;
}

.step-desc {
  font-size: 14px;
  color: #666;
}

/* 场地展示 */
.venue-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.venue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.venue-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.venue-card:hover {
  transform: translateY(-5px);
}

.venue-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.venue-content {
  padding: 20px;
  background-color: white;
}

.venue-content h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #1e5799;
}

.venue-content p {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.venue-content a {
  display: inline-block;
  color: #207cca;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}

/* 案例展示 */
.cases-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.case-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.case-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.case-card:hover {
  transform: translateY(-5px);
}

.case-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.case-content {
  padding: 20px;
  background-color: white;
}

.case-content h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #1e5799;
}

.case-content p {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.case-content a {
  display: inline-block;
  color: #207cca;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}


</style>